<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .new {
        border: 1px solid red;
    }

    .old {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<body>


<div class="old"></div>


<script>
    // 旧值替换新值
    const element = document.querySelector('div')
    // 新增一个样式
    element.classList.add('new')
    // 移除一个样式
    element.classList.remove('new')

    // 有就删除掉，没有就加上 针对整个new的添加和删除而不是某个小属性
    element.classList.toggle('new')
</script>
</body>
</html>